<template>
  <div class="wrap">
    <van-form>
      <div class="item">
        <div class="label">昵称</div>
        <van-field
          v-model="formData.nickName"
          name="昵称1"
          label=""
          placeholder="请填写昵称"
          :rules="rules.nickName"
        />
      </div>
      <div class="item">
        <div class="label">年龄</div>
        <van-field
          v-model="formData.age"
          name="年龄"
          label=""
          placeholder="请填写年龄"
          :rules="rules.age"
        />
      </div>
      <div class="item">
        <div class="label">性别</div>
        <van-radio-group
          v-model="radioValue"
          direction="horizontal"
          @change="onRadioChange"
        >
          <van-radio name="1" checked-color="#d5ad57" icon-size="16px"
            >男</van-radio
          >
          <van-radio name="2" checked-color="#d5ad57" icon-size="16px"
            >女</van-radio
          >
        </van-radio-group>
      </div>
      <div class="btn-wrap" @click="onSubmit">
        <button class="btn">保存</button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, watch, computed } from 'vue'
import { showSuccessToast, showFailToast } from 'vant'
import { useRouter, useRoute } from 'vue-router'
import { postData } from '@/request/request.js'
let router = useRouter()
let route = useRoute()
let query = route.query
localStorage.setItem('user_id', query.user_id)
localStorage.setItem('access_token', query.access_token)
localStorage.setItem('open_id', query.open_id)
localStorage.setItem('currentPath', query.currentPath)

const radioValue = ref('1')
const formData = reactive({
  nickName: '',
  age: '',
  sex: '',
})

const rules = reactive({
  nickName: [{ required: true, message: '请填写用户名' }],
  age: [
    {
      required: true,
      message: '请填写年龄',
      validator: (value) => {
        if (!value) {
          return '请填写年龄'
        } else if (isNaN(Number(value))) {
          return '年龄必须是数字类型，请重新填写'
        } else if (value < 3) {
          return '携行用户不能小于3岁'
        } else if (value > 18) {
          return '携行用户不能大于18岁'
        } else {
          return
        }
      },
    },
  ],
  sex: [{ required: true, message: '请选择性别' }],
})

let onRadioChange = (val) => {
  console.log(val)
}

let onSubmit = () => {
  let user_id = localStorage.getItem('user_id')
  if (!user_id) {
    Toast.fail('请先绑定手机号')
    setTimeout(() => {
      uni.navigateTo({
        url: '/pages/loginPhone/loginPhone',
      })
    }, 1000)
  } else {
    postData('/user/carried/register', {
      nick_name: formData.nickName,
      age: Number(formData.age),
      gender: radioValue.value,
    })
      .then((res) => {
        if (res.code == 0) {
          showSuccessToast('保存成功')
        } else if (res.code == -57005) {
          showFailToast('最多只能创建2位携行用户')
        }
        setTimeout(() => {
          wx &&
            wx.miniProgram.navigateTo({
              url: '/pagesC/carryUserList/carryUserList',
            })
        }, 2000)
      })
      .catch((err) => {
        showFailToast('保存失败')
      })
  }
}

onMounted(() => {})

watch(
  () => route.fullPath,
  () => {}
)
</script>

<style scoped>
.wrap {
  font-size: 0.16rem;
  background: #f7f7f8;
  color: #333;
}
.van-form {
  margin-top: 0.05rem;
}
.item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 0.2rem;
  height: 0.4rem;
  /* border-bottom: 1px solid red; */
  background: #fff;
  margin-bottom: 0.1rem;
}
.label {
  width: 0.6rem;
}
.van-cell {
  padding: 0;
}

.btn-wrap {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.3rem;
}

.btn-wrap .btn {
  border: none;
  width: 90%;
  height: 0.35rem;
  line-height: 0.35rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #d5ad57;
  border-radius: 0.35rem;
  color: #fff;
  font-weight: 400;
  font-size: 0.16rem;
}
</style>
